import React, { useState, useEffect } from "react";
import { withEditableResouce } from './withEditableResource'

export const UserForm = withEditableResouce(({ onChangeUser, onSaveUser, onResetUser, user }) => {
    const { name, age, hair } = user || {}
    return (
        <>
            <label>name</label>
            <input value={name} onChange={e => onChangeUser({ name: e.target.value })}></input>
            <label>age</label>
            <input value={age} type='number' onChange={e => onChangeUser({ age: Number(e.target.value) })}></input>
            <label >hair</label>
            <input value={hair} onChange={e => onChangeUser({ hair: e.target.value })}></input>
            <button onClick={() => onResetUser()}>reset</button>
        </>
    )
}, '/user/1', 'user')